<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script src="../lib/vue.min.js"></script>
<style>
    .bounce-enter-active {
      animation: bounce-in .5s;
    }
    .bounce-leave-active {
      animation: bounce-in .5s reverse;
    }
    @keyframes bounce-in {
      0% {
        transform: translateX(-100%);
        opacity: 0;
      }
      
      100% {
        transform: translateX(0px);
        opacity: 1;
      }
    }
 </style>
</head>
<body>
    <div id="box">
      <!-- <button @click="isShow=!isShow">click</button> -->
      <navbar @myevent= "handleEvent"></navbar>

      <transition name="bounce">
        <sidebar v-show="isShow"></sidebar>
      </transition>
    </div>
   
    <script type="text/javascript">
        //子组件

        Vue.component("navbar",{
          template:`<div>
            navbar
            
            <button @click="handleClick">navbar-button</button>
          </div>`,
          methods:{
            handleClick(){
              this.$emit("myevent")
            }
          }
          
        })


        Vue.component("sidebar",{
          template:`<div style="background:yellow;width:200px;">
            <ul>
              <li>11111</li>  
              <li>11111</li>  
              <li>11111</li>  
            </ul>  
          </div>`
        })

        new Vue({
          el:"#box",
          data:{
            isShow:false
          },
          methods: {
            handleEvent(){
              this.isShow = !this.isShow
            }
          },
        })
    </script>
</body>
</html>